<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue123</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<style>
    .left1 {
        float: left;
        width: 3%
    }

    .icon1 {
        width: 40px;
        height: 38px;
        line-height: 38px;
        background-color: rgb(127, 127, 245);
        border: 1px solid gray;
        color: white;
        text-align: center;
    }

    .icon2 {
        width: 40px;
        height: 38px;
        line-height: 38px;
        background-color: white;
        border: 1px solid gray;

        text-align: center;
    }

    .div1 {
        width: 40px;
        height: 60px;
        line-height: 60px;
        background-color: rgb(127, 127, 245);
        border: 1px solid gray;
        color: white;
        text-align: center;
    }

    .left2 {
        float: left;
        width: 3%;

    }

    .div2 {
        width: 40px;
        height: 60px;
        line-height: 60px;
        background-color: white;
        border: 1px solid gray;
        color: white;
        text-align: center;
    }

    p {
        height: 25px;
        line-height: 25px;
        /* text-align: center */
        color: #a9a9fa
    }


    .div3 {
        float: right;
        width: 94%
    }

    .div_name {
        float: left;
        height: 38px;
        line-height: 38px;
        text-align: center;
        width: 132px;
        background: -webkit-linear-gradient(white, #a8f2f5);
        box-shadow: gray;
        border: rgb(167, 164, 164) solid 0.5px;
        border-radius: 5px;

    }

    .div_1 {
        float: left;
        height: 30px;
        width: 132px;

        border-top: gray solid 0.5px;
        border-left: gray solid 0.5px;
        border-right: gray solid 0.5px;

    }

    .div_2 {
        float: left;
        height: 30px;
        width: 132px;

        border-top: rgb(240, 239, 239) solid 0.1px;
        border-left: gray solid 0.5px;
        border-right: gray solid 0.5px;
        border-bottom: gray solid 0.5px;

    }

</style>

<body>


    <div id="app">


        <div class="left1">
            <div class="icon1"><span class="glyphicon glyphicon-dashboard"></div>
            <div class="div1">09</div>
            <div class="div1">10</div>
            <div class="div1">11</div>
            <div class="div1">12</div>
            <div class="div1">13</div>
            <div class="div1">14</div>
            <div class="div1">15</div>
            <div class="div1">16</div>
            <div class="div1">17</div>
            <div class="div1">18</div>

        </div>
        <div class="left2">
            <div class="icon2">
                <sapn class="glyphicon glyphicon-user"></sapn>
            </div>
            <div class="div2">
                <p>00</p>
                <p>30</p>
            </div>
            <div class="div2">
                <p>00</p>
                <p>30</p>
            </div>
            <div class="div2">
                <p>00</p>
                <p>30</p>
            </div>
            <div class="div2">
                <p>00</p>
                <p>30</p>
            </div>
            <div class="div2">
                <p>00</p>
                <p>30</p>
            </div>
            <div class="div2">
                <p>00</p>
                <p>30</p>
            </div>
            <div class="div2">
                <p>00</p>
                <p>30</p>
            </div>
            <div class="div2">
                <p>00</p>
                <p>30</p>
            </div>
            <div class="div2">
                <p>00</p>
                <p>30</p>
            </div>
            <div class="div2">
                <p>00</p>
                <p>30</p>
            </div>


        </div>

        <div class="div3">
            <div class="div_name" v-for=" item in listname">{{item}}</div>
            <!-- <div class="div_name" >123</div>
                         <div class="div_name" >123</div>
                         <div class="div_name" >123</div>
                         <div class="div_name" >123</div>
                           <div class="div_name" >123</div>
                            <div class="div_name" >123</div>
                            <div class="div_name" >123</div>
                            <div class="div_name" >123</div>
                              <div class="div_name" >123</div> -->


        </div>


    </div>


    <div class="div3">

        <div class="div_1" style="text-align: center">正常班</div>
        <div class="div_1" style="text-align: center">正常班</div>
        <div class="div_1" style="text-align: center">正常班</div>
        <div class="div_1" style="text-align: center">正常班</div>
        <div class="div_1" style="text-align: center">正常班</div>
        <div class="div_1" style="text-align: center">正常班</div>
        <div class="div_1" style="text-align: center">正常班</div>
        <div class="div_1" style="text-align: center">正常班</div>
        <div class="div_1" style="text-align: center">正常班</div>
    </div>

    <div class="div3">
        <div class="div_2">456q</div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2"></div>
        <div class="div_2">456</div>

    </div>

    <div class="div3">

        <div class="div_1" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div class="div123"><div>
        </div>
        <div class="div_1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <div class="div_1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <div class="div_1" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">456</div>
        <div class="div_1" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="createwww()">
            456</div>
        <div class="div_1"  onclick="createwww()">456(2)</div>
        <div class="div_1">456</div>
        <div class="div_1">456</div>
        <div class="div_1" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">456</div>

    </div>

    <div class="div3">

        <div class="div_2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <div class="div_2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <div class="div_2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>
        <div class="div_2">456</div>

    </div>
    <!--
                    <div class="div3">
                
                            <div class="div_1" >456</div>
                            <div class="div_1" >456</div>
                            <div class="div_1" >456</div>
                            <div class="div_1" >456</div>
                            <div class="div_1" >456</div>
                            <div class="div_1" >456</div>
                            <div class="div_1" >456</div>
                            <div class="div_1" >456</div>
                            <div class="div_1" >456</div>
                           
                        </div>
                        <div class="div3">
                                
                                <div class="div_2" >456</div>
                                <div class="div_2" >456</div>
                                <div class="div_2" >456</div>
                                <div class="div_2" >456</div>
                                <div class="div_2" >456</div>
                                <div class="div_2" >456</div>
                                <div class="div_2" >456</div>
                                <div class="div_2" >456</div>
                                <div class="div_2" >456</div>
                               
                            </div>
                            <div class="div3">
                
                                    <div class="div_1" >456</div>
                                    <div class="div_1" >456</div>
                                    <div class="div_1" >456</div>
                                    <div class="div_1" >456</div>
                                    <div class="div_1" >456</div>
                                    <div class="div_1" >456</div>
                                    <div class="div_1" >456</div>
                                    <div class="div_1" >456</div>
                                    <div class="div_1" >456</div>
                                   
                                </div>
                                <div class="div3">
                                        
                                        <div class="div_2" >456</div>
                                        <div class="div_2" >456</div>
                                        <div class="div_2" >456</div>
                                        <div class="div_2" >456</div>
                                        <div class="div_2" >456</div>
                                        <div class="div_2" >456</div>
                                        <div class="div_2" >456</div>
                                        <div class="div_2" >456</div>
                                        <div class="div_2" >456</div>
                                       
                                    </div>
                                    <div class="div3">
                
                                            <div class="div_1" >456</div>
                                            <div class="div_1" >456</div>
                                            <div class="div_1" >456</div>
                                            <div class="div_1" >456</div>
                                            <div class="div_1" >456</div>
                                            <div class="div_1" >456</div>
                                            <div class="div_1" >456</div>
                                            <div class="div_1" >456</div>
                                            <div class="div_1" >456</div>
                                           
                                        </div>
                                        <div class="div3">
                                                
                                                <div class="div_2" >456</div>
                                                <div class="div_2" >456</div>
                                                <div class="div_2" >456</div>
                                                <div class="div_2" >456</div>
                                                <div class="div_2" >456</div>
                                                <div class="div_2" >456</div>
                                                <div class="div_2" >456</div>
                                                <div class="div_2" >456</div>
                                                <div class="div_2" >456</div>
                                               
                                            </div>
                                            <div class="div3">
                
                                                    <div class="div_1" >456</div>
                                                    <div class="div_1" >456</div>
                                                    <div class="div_1" >456</div>
                                                    <div class="div_1" >456</div>
                                                    <div class="div_1" >456</div>
                                                    <div class="div_1" >456</div>
                                                    <div class="div_1" >456</div>
                                                    <div class="div_1" >456</div>
                                                    <div class="div_1" >456</div>
                                                   
                                                </div>
                                                <div class="div3">
                                                        
                                                        <div class="div_2" >456</div>
                                                        <div class="div_2" >456</div>
                                                        <div class="div_2" >456</div>
                                                        <div class="div_2" >456</div>
                                                        <div class="div_2" >456</div>
                                                        <div class="div_2" >456</div>
                                                        <div class="div_2" >456</div>
                                                        <div class="div_2" >456</div>
                                                        <div class="div_2" >456</div>
                                                       
                                                    </div>
                                                    <div class="div3">
                
                                                            <div class="div_1" >456</div>
                                                            <div class="div_1" >456</div>
                                                            <div class="div_1" >456</div>
                                                            <div class="div_1" >456</div>
                                                            <div class="div_1" >456</div>
                                                            <div class="div_1" >456</div>
                                                            <div class="div_1" >456</div>
                                                            <div class="div_1" >456</div>
                                                            <div class="div_1" >456</div>
                                                           
                                                        </div>
                                                        <div class="div3">
                                                                
                                                                <div class="div_2" >456</div>
                                                                <div class="div_2" >456</div>
                                                                <div class="div_2" >456</div>
                                                                <div class="div_2" >456</div>
                                                                <div class="div_2" >456</div>
                                                                <div class="div_2" >456</div>
                                                                <div class="div_2" >456</div>
                                                                <div class="div_2" >456</div>
                                                                <div class="div_2" >456</div>
                                                               
                                                            </div>

                                                            <div class="div3">
                
                                                                    <div class="div_1" >456</div>
                                                                    <div class="div_1" >456</div>
                                                                    <div class="div_1" >456</div>
                                                                    <div class="div_1" >456</div>
                                                                    <div class="div_1" >456</div>
                                                                    <div class="div_1" >456</div>
                                                                    <div class="div_1" >456</div>
                                                                    <div class="div_1" >456</div>
                                                                    <div class="div_1" >456</div>
                                                                   
                                                                </div>
                                                                <div class="div3">
                                                                        
                                                                        <div class="div_2" >456</div>
                                                                        <div class="div_2" >456</div>
                                                                        <div class="div_2" >456</div>
                                                                        <div class="div_2" >456</div>
                                                                        <div class="div_2" >456</div>
                                                                        <div class="div_2" >456</div>
                                                                        <div class="div_2" >456</div>
                                                                        <div class="div_2" >456</div>
                                                                        <div class="div_2" >456</div>
                                                                       
                                                                    </div>

                                                                    <div class="div3">
                
                                                                            <div class="div_1" >456</div>
                                                                            <div class="div_1" >456</div>
                                                                            <div class="div_1" >456</div>
                                                                            <div class="div_1" >456</div>
                                                                            <div class="div_1" >456</div>
                                                                            <div class="div_1" >456</div>
                                                                            <div class="div_1" >456</div>
                                                                            <div class="div_1" >456</div>
                                                                            <div class="div_1" >456</div>
                                                                           
                                                                        </div>
                                                                        <div class="div3">
                                                                                
                                                                                <div class="div_2" >456</div>
                                                                                <div class="div_2" >456</div>
                                                                                <div class="div_2" >456</div>
                                                                                <div class="div_2" >456</div>
                                                                                <div class="div_2" >456</div>
                                                                                <div class="div_2" >456</div>
                                                                                <div class="div_2" >456</div>
                                                                                <div class="div_2" >456</div>
                                                                                <div class="div_2" >456</div>
                                                                               
                                                                            </div>
                                                                            <div class="div3">
                
                                                                                    <div class="div_1" >456</div>
                                                                                    <div class="div_1" >456</div>
                                                                                    <div class="div_1" >456</div>
                                                                                    <div class="div_1" >456</div>
                                                                                    <div class="div_1" >456</div>
                                                                                    <div class="div_1" >456</div>
                                                                                    <div class="div_1" >456</div>
                                                                                    <div class="div_1" >456</div>
                                                                                    <div class="div_1" >456</div>
                                                                                   
                                                                                </div>
                                                                                <div class="div3">
                                                                                        
                                                                                        <div class="div_2" >456</div>
                                                                                        <div class="div_2" >456</div>
                                                                                        <div class="div_2" >456</div>
                                                                                        <div class="div_2" >456</div>
                                                                                        <div class="div_2" >456</div>
                                                                                        <div class="div_2" >456</div>
                                                                                        <div class="div_2" >456</div>
                                                                                        <div class="div_2" ondrop="drop(event)" ondragover="allowDrop(event)" >456</div>
                                                                                        <div class="div_2" ondrop="drop(event)" ondragover="allowDrop(event)" >456</div>
                                                                                       
                                                                                    </div> -->


    <!-- <div id="objee">
                                                    
                                                </div> -->



    <!-- <div id="objee"  draggable="true" >
        <div>张莞婷</div>
        <div>10:00到11:00</div>                                                      
    </div>


    <div  class="qwe" ></div>  -->


    <!-- <br>
    <div id="objee1"  draggable="true" ondragstart="drag(event)"  >
   </div>
   <div id="objee2"  draggable="true" ondragstart="drag(event)"  >
    </div> -->







    <div style="z-index:10000" class="modal fade" id="myModal" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        请输入信息(message)
                    </h4>
                </div>
                <div class="modal-body">
                    姓名:<input type="text" class="qwe"><br>
                    年纪:<input type="text"><br>
                    性别:<input id="man" type="radio" checked="checked" name="1" />男<input id="woman" type="radio"
                        name="1" />女 <br>
                    备注:<input type="text">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary">
                        <span id="submit1">提交</span>
                    </button>
                </div>
            </div>
        </div>
    </div>






    <script>

        window.onload = function () {

            var Submit1 = document.getElementById('submit1');

            Submit1.onclick = function () {
                var Value_ = document.getElementsByClassName("qwe")[0].value;
                console.log(Value_);
                alert("点击了");



                // document.ondblclick=function(ev){
                // var oEvent=ev||event;
                // var oDiv=document.createElement('div');
                // oDiv.style.left=oEvent.clientX+'px';  
                // oDiv.style.top=oEvent.clientY+'px';  
                // oDiv.style.border='1px solid red';
                // oDiv.style.position='absolute'; 
                // oDiv.style.width='132px'; 
                // oDiv.style.height='55px'; 
                // oDiv.style.borderRadius='5px';
                // //var div_1  = document.getElementsByClassName("div_1");
                // document.body.appendChild(oDiv); 
                // }
            };




        }


        window.onload=function(){

       

alert("方法");

var element = document.createElement("div123");

element.style.width = '130px';
element.id="div123"
element.style.height = '25px'
element.style.backgroundColor = 'green'
element.innerText = 'value'


var ul_child = document.getElementsByClassName('div_1');
   for (var i = 0; i < ul_child.length; i++) {
       ul_child[i].index = i;
       ul_child[i].onclick = function(){
//                var j = this.index;
// 　               alert("元素索引为" +this.index);
document.getElementsByClassName('div_1')[this.index].appendChild(element);
}

}
// element.appendChild(document.createTextNode(''));
// document.getElementsByClassName('div_1')[0].appendChild(element);

}
        
// function allowDrop(ev)
// {
// 	ev.preventDefault();
// }

// function drag(ev)
// {
// 	ev.dataTransfer.setData("Text",ev.target.id);
// }

// function drop(ev)
// {
// 	ev.preventDefault();
// 	var data=ev.dataTransfer.getData("Text");
// 	ev.target.appendChild(document.getElementById(data));
// }



     
        



        var divs =document.getElementById("div123");

        //元素的鼠标落下事件
        divs.onmousedown = function(ev){

            //event的兼容性
            var ev = ev||event;

            //获取鼠标按下的坐标
            var x1 = ev.clientX;
            var y1 = ev.clientY;

            //获取元素的left，top值
            var l1= divs.offsetLeft;
            var t1 = divs.offsetTop;

            //给可视区域添加鼠标的移动事件
            document.onmousemove = function(ev){

                //event的兼容性
                var ev = ev||event;

                //获取鼠标移动时的坐标
                var x2 = ev.clientX;
                var y2 = ev.clientY;

                //计算出鼠标的移动距离
                var x = x2-x1;
                var y = y2-y1;

                //移动的数值与元素的left，top相加，得出元素的移动的距离
                var lt = y+t1;
                var ls = x+l1;

                //更改元素的left，top值
                divs.style.top = lt+'px';
                divs.style.left = ls+'px';

            }

            //清除
            document.onmouseup = function(ev){

                document.onmousemove = null;

            }

        }





        var vm = new Vue({
            el: '#app',


            data: {


                listname: [
                    "李莉",
                    "唐伟",
                    "刘京沙",
                    "郎宇",
                    "冯伟",
                    "乔班",
                    "特聘专家",
                    "夏春蕾",
                    "未指定医生",


                ]

            },
            created() {
                this.get()
            },
            methods: {


                get() {

                    // var obj= document.getElementsByClassName("obj");

                    // function $(".obj").mousedown(function () { 

                    // });
                    // $(function(){
                    //     $(".obj").mousedown(function(ev){
                    //         var ev= ev||event ;
                    //         var 
                    //     });
                    // });


                    // var obj= document.getElementsByClassName("obj");

                    //           obj.onmousedown=function(ev){
                    //             var ev= ev||event ;

                    //                     //鼠标按下的坐标
                    //             var x1=ev.clientX ;
                    //             var y1=ev.clientY ;

                    //             //元素的left top 
                    //             var l1=obj.offsetX ;
                    //             var r1=obj.offsetY;



                    //             document.onmouseover=function(ev){

                    //             }


                    //         }



                    //  var divs = document.getElementById("obj");

                    // //元素的鼠标落下事件
                    // divs.onmousedown = function(ev){

                    //     //event的兼容性
                    //     var ev = ev||event;

                    //     //获取鼠标按下的坐标
                    //     var x1 = ev.clientX;
                    //     var y1 = ev.clientY;

                    //     //获取元素的left，top值
                    //     var l1= divs.offsetLeft;
                    //     var t1 = divs.offsetTop;

                    //     //给可视区域添加鼠标的移动事件
                    //     document.onmousemove = function(ev){

                    //         //event的兼容性
                    //         var ev = ev||event;

                    //         //获取鼠标移动时的坐标
                    //         var x2 = ev.clientX;
                    //         var y2 = ev.clientY;

                    //         //计算出鼠标的移动距离
                    //         var x = x2-x1;
                    //         var y = y2-y1;

                    //         //移动的数值与元素的left，top相加，得出元素的移动的距离
                    //         var lt = y+t1;
                    //         var ls = x+l1;

                    //         //更改元素的left，top值
                    //         divs.style.top = lt+'px';
                    //         divs.style.left = ls+'px';

                    //     }

                    //     //清除
                    //     document.onmouseup = function(ev){

                    //         document.onmousemove = null;

                    //     }

                    // }




                }


            }
            ,

            computed: {
                //   'fullname' :function(){
                //     return this.firstname + this.nextname
                //   }
            }




        }) 
    </script>
</body>















<!-- 



      <div class="div3" >
            <table class="table  table-bordered table-hover" >
                    <thead>
                      <tr style="text-align: center">
                            <th  v-for="item in listname" >{{item}}</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                            <td ><div class="normal_div" >正常班</div></td>
                            <td>正常班</td>
                            <td>正常班</td>
                            <td>正常班</td>
                            <td>正常班</td>
                            <td>正常班</td>
                            <td>正常班</td>
                            <td>正常班</td>
                            <td>正常班</td>
                           
                      </tr>
                      <tr>
                        
                        <td>
                            <div class="td_1"   ></div>
                            <div class="td_1"></div>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                      </tr>
                      <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        
                        <td></td>
                        <td></td>

                      </tr>
                      <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>

                      </tr>
                      <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            
                            <td></td>
                            <td></td>

                          </tr>
                          <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                
                                <td></td>
                                <td></td>
    
                              </tr>
                              <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    
                                    <td></td>
                                    <td></td>
        
                                  </tr>
                                  <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        
                                        <td></td>
                                        <td></td>
            
                                      </tr>
                                      <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            
                                            <td></td>
                                            <td></td>
                
                                          </tr>
                                          <tr>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                
                                                <td></td>
                                                <td></td>
                    
                                              </tr>
                    </tbody>
                  </table>

                </div> -->